<script setup>
import { ref, onMounted, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getBusinessDetailApi } from '@/api/business'

const route = useRoute()
const router = useRouter()

// 商机详情数据
const businessDetail = ref({})

// 跟踪记录列表
const trackRecords = ref([])

// 加载状态
const loading = ref(false)

// 性别选项
const genderOptions = [
  { label: '男', value: 1 },
  { label: '女', value: 2 }
]

// 科目选项
const subjectOptions = [
  { label: '语文', value: 1 },
  { label: '数学', value: 2 },
  { label: '英语', value: 3 },
  { label: '物理', value: 4 },
  { label: '化学', value: 5 },
  { label: '生物', value: 6 },
  { label: 'UI设计', value: 9 },
  { label: '其他', value: 7 }
]

// 学历选项
const degreeOptions = [
  { label: '小学', value: 1 },
  { label: '初中', value: 2 },
  { label: '高中', value: 3 },
  { label: '本科', value: 4 },
  { label: '硕士', value: 5 },
  { label: '博士', value: 6 },
  { label: '其他', value: 7 }
]

// 工作状态选项
const jobStatusOptions = [
  { label: '在职', value: 1 },
  { label: '离职', value: 2 },
  { label: '学生', value: 3 },
  { label: '其他', value: 4 }
]

// 渠道选项
const channelOptions = [
  { label: '电话', value: 1 },
  { label: '线上', value: 2 },
  { label: '推荐', value: 3 },
  { label: '其他', value: 4 }
]

// 状态选项
const statusOptions = [
  { label: '待跟进', value: 1 },
  { label: '跟进中', value: 2 },
  { label: '已邀约', value: 3 },
  { label: '已试听', value: 4 },
  { label: '已成交', value: 5 },
  { label: '已拒绝', value: 6 },
  { label: '已过期', value: 7 }
]

// 跟踪状态选项
const trackStatusOptions = [
  { label: '有效跟进', value: 1 },
  { label: '无效跟进', value: 2 },
  { label: '未接通', value: 3 },
  { label: '已拒绝', value: 4 }
]

// 获取标签名称
const getLabel = (value, options) => {
  const option = options.find(opt => opt.value === value)
  return option ? option.label : '未知'
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '-'
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 解析keyItems数组
const parseKeyItems = (keyItemsStr) => {
  if (!keyItemsStr) return []
  try {
    const items = JSON.parse(keyItemsStr)
    return Array.isArray(items) ? items : []
  } catch (error) {
    console.error('解析keyItems失败:', error)
    return []
  }
}

// 加载商机详情
const loadBusinessDetail = async () => {
  const id = route.params.id
  if (!id) {
    ElMessage.error('无效的商机ID')
    router.push('/business/pool')
    return
  }
  
  loading.value = true
  try {
    const result = await getBusinessDetailApi(id)
    
    if (result.code === 1) {
      businessDetail.value = result.data
      trackRecords.value = result.data.trackRecords || []
    } else {
      ElMessage.error(result.msg || '查询商机详情失败')
    }
  } catch (error) {
    console.error('查询商机详情出错:', error)
    ElMessage.error('网络错误，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 返回列表
const handleBack = () => {
  router.go(-1)
}

// 组件挂载时加载数据
onMounted(() => {
  loadBusinessDetail()
})
</script>

<template>
  <div class="business-detail">
    <h2 class="page-title">商机详情</h2>
    
    <div class="detail-section" v-loading="loading">
      <!-- 基本信息区域 -->
      <div class="info-card">
        <h3 class="card-title">基本信息</h3>
        <div class="info-content">
          <div class="info-row">
            <div class="info-item">
              <span class="info-label">商机ID:</span>
              <span class="info-value">{{ businessDetail.id || '-' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">客户姓名:</span>
              <span class="info-value">{{ businessDetail.name || '-' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">手机号:</span>
              <span class="info-value">{{ businessDetail.phone || '-' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">性别:</span>
              <span class="info-value">{{ getLabel(businessDetail.gender, genderOptions) }}</span>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item">
              <span class="info-label">年龄:</span>
              <span class="info-value">{{ businessDetail.age || '-' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">微信:</span>
              <span class="info-value">{{ businessDetail.wechat || '-' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">QQ:</span>
              <span class="info-value">{{ businessDetail.qq || '-' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">科目:</span>
              <span class="info-value">{{ getLabel(businessDetail.subject, subjectOptions) }}</span>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item">
              <span class="info-label">学历:</span>
              <span class="info-value">{{ getLabel(businessDetail.degree, degreeOptions) }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">工作状态:</span>
              <span class="info-value">{{ getLabel(businessDetail.jobStatus, jobStatusOptions) }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">渠道:</span>
              <span class="info-value">{{ getLabel(businessDetail.channel, channelOptions) }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">状态:</span>
              <span class="info-value">{{ getLabel(businessDetail.status, statusOptions) }}</span>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item full-width">
              <span class="info-label">备注:</span>
              <span class="info-value">{{ businessDetail.remark || '-' }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 时间信息区域 -->
      <div class="info-card">
        <h3 class="card-title">时间信息</h3>
        <div class="info-content">
          <div class="info-row">
            <div class="info-item">
              <span class="info-label">下次跟进时间:</span>
              <span class="info-value">{{ businessDetail.nextTime ? formatDate(businessDetail.nextTime) : '-' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">创建时间:</span>
              <span class="info-value">{{ businessDetail.createTime ? formatDate(businessDetail.createTime) : '-' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">更新时间:</span>
              <span class="info-value">{{ businessDetail.updateTime ? formatDate(businessDetail.updateTime) : '-' }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 跟踪记录区域 -->
      <div class="info-card">
        <h3 class="card-title">跟踪记录</h3>
        <div class="track-records">
          <el-empty v-if="trackRecords.length === 0" description="暂无跟踪记录" />
          <div v-else class="record-list">
            <div v-for="record in trackRecords" :key="record.id" class="record-item">
              <div class="record-header">
                <span class="record-user">{{ record.assignName || '-' }}</span>
                <span class="record-time">{{ formatDate(record.createTime) }}</span>
                <span class="record-status">{{ getLabel(record.trackStatus, trackStatusOptions) }}</span>
              </div>
              <div class="record-content">
                <div class="record-detail">
                  <strong>重点项目:</strong>
                  <span v-for="(item, index) in parseKeyItems(record.keyItems)" :key="index" class="key-item">
                    {{ item }}
                  </span>
                  <span v-if="parseKeyItems(record.keyItems).length === 0">无</span>
                </div>
                <div class="record-detail">
                  <strong>下次跟进时间:</strong>
                  <span>{{ record.nextTime ? formatDate(record.nextTime) : '无' }}</span>
                </div>
                <div class="record-detail">
                  <strong>跟进内容:</strong>
                  <span>{{ record.record || '-' }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 操作按钮 -->
    <div class="action-section">
      <el-button @click="handleBack">返回</el-button>
    </div>
  </div>
</template>

<style scoped>
.business-detail {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
}

.page-title {
  font-size: 20px;
  font-weight: 500;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.detail-section {
  margin-bottom: 30px;
}

.info-card {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin-bottom: 20px;
  overflow: hidden;
}

.card-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  background-color: #f5f7fa;
  padding: 12px 20px;
  border-bottom: 1px solid #e0e0e0;
}

.info-content {
  padding: 20px;
}

.info-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.info-item {
  flex: 0 0 calc(25% - 20px);
  margin-right: 20px;
  margin-bottom: 10px;
}

.info-item.full-width {
  flex: 0 0 100%;
  margin-right: 0;
}

.info-label {
  color: #606266;
  margin-right: 10px;
  font-size: 14px;
}

.info-value {
  color: #303133;
  font-size: 14px;
}

.track-records {
  padding: 0 20px 20px;
}

.record-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.record-item {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 15px;
  background-color: #fafafa;
}

.record-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.record-user {
  font-weight: 500;
  color: #303133;
  margin-right: 20px;
}

.record-time {
  color: #909399;
  font-size: 13px;
  margin-right: 20px;
}

.record-status {
  padding: 2px 8px;
  background-color: #ecf5ff;
  color: #409eff;
  border-radius: 10px;
  font-size: 12px;
}

.record-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.record-detail {
  font-size: 14px;
  color: #303133;
}

.key-item {
  display: inline-block;
  background-color: #f0f9eb;
  color: #67c23a;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 8px;
  font-size: 12px;
}

.action-section {
  margin-top: 20px;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .info-item {
    flex: 0 0 calc(33.333% - 15px);
    margin-right: 15px;
  }
}

@media (max-width: 768px) {
  .business-detail {
    padding: 10px;
  }
  
  .info-item {
    flex: 0 0 calc(50% - 10px);
    margin-right: 10px;
  }
  
  .record-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}

@media (max-width: 480px) {
  .info-item {
    flex: 0 0 100%;
    margin-right: 0;
  }
}
</style>